<!-- 订单 -->
<template>
  <div class="shop-cart">
    <header class="page-header">
      <div class="header-content">购物车</div>
      <span v-if="cartMode === false" class="appeal-record" @click="setCartMode">完成</span>
      <span v-if="cartMode === true" class="appeal-record" @click="setCartMode">编辑</span>
    </header>
    <!-- 购物车为空时显示 -->
    <section class="cart-empty" v-if="clearCart === true">
      <ul class="empty-content">
        <li class="item-text">
          <p>您的购物车空空的哦~</p>
          <p>去看看心仪的商品吧~</p>
        </li>
        <li class="item-btn">
          <router-link to="/" class="hairline-btn" tag="span">立即去购物</router-link>
        </li>
      </ul>
    </section>
    <!-- 购物车不为空时显示 -->
    <div v-else>
      <section class="order-card">
        <van-checkbox checked-color="#91C95B" v-model="checked">
          <p class="checkbox-all">
          <div class="store-info">
            <img src="src/assets/sort/tx.jpg" class="header-img" />
            <span>我爱生活</span>
          </div>
          </p>
        </van-checkbox>
        <van-checkbox-group class="order-list">
          <ul v-for="(item, index) in lists" :key="index">
            <div class="order-info">
              <img :src="item.imgSrc" />
              <li class="order-detail">
                <ul>
                  <li class="info-one">
                    <span>{{ item.desc }}</span>
                  </li>
                  <li class="info-two">
                    <span>{{ item.info }}</span>
                  </li>
                </ul>
                <div class="info-count">
                  <span>￥{{ item.price }}</span>
                  <!-- 修改数量 -->
                  <van-stepper v-model="item.num" />
                </div>
              </li>
            </div>
            <div class="order-total">
              <label>合计：</label>
              <!-- 根据数量和价格计算总价 -->
              <span>{{ item.price * item.num }}</span>
            </div>
          </ul>
        </van-checkbox-group>
      </section>
    </div>
    <!-- 结算编辑 -->
    <div v-if="clearCart === false">
      <section v-if="cartMode" class="options-edit">
        <van-submit-bar :price="amount" button-text="结算" @submit="submitSettlement">
          <van-checkbox checked-color="#91C95B" v-model="checked" @change="quan">全选</van-checkbox>
        </van-submit-bar>
      </section>
      <section v-else class="options-delete">
        <van-submit-bar button-text="删除" @submit="submitDelete">
          <van-checkbox checked-color="#91C95B" v-model="checked">全选</van-checkbox>
        </van-submit-bar>
      </section>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
const $router = useRouter();
const checked = ref(false);
// 编辑完成按钮
const cartMode = ref(true);
// 修改编辑按钮
const setCartMode = () => {
  cartMode.value = !cartMode.value;
};
// 结算
const submitSettlement = () => {
  if (amount.value != 0) {
    $router.push("/order");
  } else {
    alert("请选择结算产品")
  }
};
// 删除
const submitDelete = () => {
  clearCart.value = true
};
// 判断购物车是否为空
const clearCart = ref(false);
// 结算金额
const amount = ref(0);
const quan = () => {
  console.log(checked.value)
  if (checked.value == true) {
    amount.value = 3000 * 10
  } else {
    amount.value = 0
  }
};
// 购物车数据
const lists = reactive(
  [
    {
      imgSrc: 'src/assets/home/home6.jpg',
      info: "一箱",
      price: 100,
      desc: "葡萄",
      num: 1
    },
    {
      imgSrc: 'src/assets/home/home7.jpg',
      info: "一箱;",
      price: 200,
      desc: "菠萝",
      num: 1
    }
  ]
);
</script>
<style scoped lang="scss">
.shop-cart {
  padding: 0 16px;
  margin-bottom: 100px;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    .header-content {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #3a3a3a;
    }

    .appeal-record {
      color: #d8182d;
      font-size: 13px;
    }
  }

  .cart-empty {
    .empty-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: 40px;
      padding-bottom: 50px;

      .img-cart {
        margin-bottom: 50px;

        .svg-icon {
          width: 156px;
          height: 161px;
        }
      }

      .item-text {
        color: #3a3a3a;
        font-size: 17px;
      }

      .item-btn {
        margin-top: 18px;

        .hairline-btn {
          width: 150px;
          height: 44px;
          font-size: 17px;
          color: #d8182d;
          border: 1px solid #d8182d;
          padding: 10px 32px;
          border-radius: 4px;
        }
      }
    }
  }

  .options-edit {
    ::v-deep .van-checkbox {
      padding-left: 24px;

      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }

    ::v-deep .van-submit-bar {
      .van-submit-bar__bar {
        height: 44px;
        line-height: 44px;
      }

      bottom: 50px;

      .van-submit-bar__text {
        font-size: 17px;
        color: #333333;
      }
    }

    ::v-deep .van-submit-bar__price {
      color: #d8182d;
      font-size: 17px;
      font-weight: 600;
      padding-left: 5px;
    }
  }

  .options-delete {
    ::v-deep .van-checkbox {
      padding-left: 24px;
      float: left;

      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }

    ::v-deep .van-submit-bar {
      .van-submit-bar__bar {
        display: flex;
        justify-content: space-between;
        height: 44px;
        line-height: 44px;
      }

      bottom: 50px;

      .van-submit-bar__text {
        font-size: 17px;
        color: #333333;
      }
    }
  }

  ::v-deep .van-button--danger {
    background-color: #d8182d;
    height: 44px;
    line-height: 44px;

    .van-button__text {
      font-size: 18px;
    }
  }

  .order-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-top: 20px;

    ::v-deep .van-checkbox {
      padding-left: 0;

      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }

    .checkbox-all {
      .store-info {
        display: flex;
        justify-content: center;
        align-items: center;

        .header-img {
          width: 24px;
          height: 24px;
        }

        span {
          color: #3a3a3a;
          font-size: 11px;
          padding-left: 4px;
        }
      }
    }

    .order-list {
      .order-info {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 16px;
        display: flex;
        justify-content: flex-start;

        .check-item {
          display: flex;
          align-items: center;
        }

        img {
          margin-left: 5px;
          width: 100px;
          height: 100px;
          display: inline-block;
          background-color: #d8182d;
          border-radius: 4px;
        }

        .order-detail {
          width: 55%;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .info-one,
          .info-two {
            display: flex;
            padding-top: 4px;
            justify-content: space-between;
            font-size: 13px;
          }

          .info-one {
            color: #3a3a3a;
            padding-bottom: 5px;

            span {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          .info-two {
            color: #949497;
          }

          .info-count {
            color: #d8182d;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;

            ::v-deep .van-stepper__input {
              width: 31px;
              height: 22px;
              padding: 0;
              color: #949497;
              font-weight: normal;
              background-color: transparent;
              border: 1px solid #dbdbdb;
            }

            ::v-deep .van-stepper__plus {
              border: 1px solid #dbdbdb;
              background-color: transparent;
              width: 16px;
              height: 22px;
              border-radius: 0;
            }

            ::v-deep .van-stepper__minus {
              border-radius: 0;
              border: 1px solid #dbdbdb;
              background-color: transparent;
              width: 16px;
              height: 22px;
            }
          }
        }
      }

      .order-total {
        color: #949497;
        font-size: 14px;
        text-align: right;

        span {
          font-weight: 600;
        }
      }
    }
  }
}
</style>

